Revert widget/dashboard architecture and clean up artifacts - #14
Merged
Conversation
…1A-D) This is the first phase of replacing hardcoded plugin pages with YAML-defined widget dashboards (issue #13). Implements Chart.js time-series charts as reusable widgets. **Phase 1F - Shared Chart.js Utilities:** - chart-defaults.js: Shared Chart.js configuration, color themes, zoom options - chart-fullscreen.js: Fullscreen toggle functionality for charts - chart-sse.js: SSE connection management for real-time updates - dashboard-controls.js: Dashboard-level controls (time range, resolution, zoom reset) - charts.css: Chart widget and fullscreen mode styles **Phase 1A - Chart API Endpoints:** - api_charts.go: 7 new API handlers that return HTML chart fragments - Routes registered in main.go for each chart type - chart_partials.templ: Templ templates for Chart.js chart widgets - SessionsRequestsChartPartial - ServerHealthChartPartial - CPULoadChartPartial - MemoryUsageChartPartial - NetworkThroughputChartPartial - ResponseTimesChartPartial - ErrorRatesChartPartial **Phase 1B - Chart Widget Definitions:** - chart_widgets.go: Widget definitions for all 7 chart types - Registered in metrics plugin initialization - Category: "historical-metrics" - Config: box_id, hours, limit **Phase 1D - YAML Dashboard Definition:** - metrics-history.yaml: Dashboard matching the /history page layout - 7 chart widgets arranged in 2 rows (4+3 layout) - Default: 24 hours, 500 data points **Next Steps:** - Phase 1C: Implement dashboard-level controls integration - Phase 1E: Grid rendering responsive layout updates - Testing and side-by-side comparison with /history page Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Added /static/css/charts/charts.css to base.templ - This provides chart-aspect-container and fullscreen styles - Framework already handles box_id → serverID mapping automatically Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The previous approach used {} template expressions inside <script> tags which
don't work in templ. Changed to use 'script' template blocks which properly
handle JavaScript code generation with parameter interpolation.
This fixes the 'SyntaxError: missing : after property id' errors.
Only converted SessionsRequestsChartPartial for now - will update remaining
charts once this is verified working.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…iables The 'script' template type wraps code in functions which breaks ES6 imports. Changed to use templ.Raw() with fmt.Sprintf() to interpolate variables directly into the JavaScript code while keeping it as a proper ES6 module. This should fix the import and syntax errors. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace broken template expressions in chart scripts with a working
pattern that uses data attributes to pass parameters and dynamic
import() promises to load ES6 modules. This fixes JavaScript syntax
errors that prevented charts from rendering.
Changes:
- Pass boxID, hours, limit via data-* attributes on script tags
- Read parameters using document.currentScript.dataset
- Use dynamic import().then() instead of static imports
- Apply pattern to all 7 chart partials consistently
Fixes chart rendering issues where template expressions like
{ fmt.Sprintf() } were rendering literally instead of being
evaluated, causing "SyntaxError: missing : after property id"
errors in the browser console.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…JavaScript
Rewrote all 7 chart partials to use async IIFE pattern with template
expressions only in variable declarations at the top. This ensures
variables are properly evaluated before being used in async import
statements.
Key changes:
- Wrap entire script in (async function() { ... })()
- Declare boxID, hours, limit at top with template expressions
- Use await import() for cleaner async module loading
- Avoid document.currentScript which returns null in modules
This fixes "can't access property 'dataset', script is null" errors
that prevented charts from rendering.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Complete rewrite of the chart rendering approach: 1. Converted chart-defaults.js from ES6 module to global IIFE namespaced under window.GearboxCharts 2. Merged fullscreen functionality into chart-defaults.js 3. Added chart-defaults.js as a global script in base.templ 4. Rewrote all 7 chart partials to use templ's `script` keyword instead of HTML `<script>` tags The templ `script` keyword properly serializes Go variables to JavaScript (unlike `<script>` tags where template expressions render as literal text). This follows the same proven pattern used by the existing chart_widgets.templ (lineChartScript, etc). Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Wrap the dashboard grid in a bg-white/slate-800 rounded card with shadow and padding to match the visual style of the existing history page. Also updated metrics-history.yaml (gitignored) to use width 3 for row 2 charts so they match row 1 sizing instead of stretching full width. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
feat: add comprehensive design document for Gearbox
- Deleted the metrics chart widgets implementation from chart_widgets.go. - Removed the registration of historical chart widgets in the plugin initialization. - Updated the dashboard editor to handle widget addition and rendering without relying on the removed metrics widgets. - Enhanced the widget palette with drag-and-drop functionality for adding widgets to the dashboard. - Introduced a new sortable-loader.js to load Sortable.js with the Swap plugin for improved drag-and-drop support.
- Reverted the implementation of the widget-based dashboard architecture due to over-engineering concerns, retaining reusable components as standalone pieces. - Updated TASKS_ARCHIVE.md to reflect the reverted status and key achievements. - Modified getting-started.md to clarify plugin page addition in navigation. - Removed outdated dashboards and widgets documentation from plugins.md. - Deleted the plugin work summary report as it is no longer relevant.
- Deleted the widget palette management script which handled loading, filtering, and displaying widgets from enabled plugins. - Removed the sortable loader script that imported and initialized Sortable.js with the Swap plugin.
Contributor
There was a problem hiding this comment.
Pull request overview
Reverts the prior widget/dashboard architecture and removes related framework code, while keeping/adding standalone charting + metrics/services partial endpoints and improving agent resiliency.
Changes:
- Deleted the dashboard/widget framework and removed widget registration hooks from plugins.
- Replaced HAProxy redirects to deleted dashboard URLs with direct page rendering via templ pages.
- Added Chart.js utilities/styles plus new HTML-partial API endpoints for metrics/charts/services, and added dial retry logic to the agent client.
Reviewed changes
Copilot reviewed 96 out of 97 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| gearbox/static/js/dashboard/sortable-loader.js | Removes dashboard-specific SortableJS module loader. |
| gearbox/static/js/charts/chart-sse.js | Adds SSE connection utilities for live chart updates. |
| gearbox/static/js/charts/chart-fullscreen.js | Adds fullscreen toggling helpers for chart cards. |
| gearbox/static/js/charts/chart-defaults.js | Adds global Chart.js defaults/utilities and fullscreen helper. |
| gearbox/static/css/charts/charts.css | Adds shared chart sizing + fullscreen CSS. |
| gearbox/internal/plugins/traffic/widgets.go | Removes traffic widget definitions/registration. |
| gearbox/internal/plugins/traffic/plugin.go | Removes widget registration and dashboard-related interfaces from traffic plugin. |
| gearbox/internal/plugins/services/widgets.templ | Removes services widget templ components. |
| gearbox/internal/plugins/services/widgets.go | Removes services widget definitions/registration. |
| gearbox/internal/plugins/services/plugin.go | Removes widget registration and dashboard-related interfaces from services plugin. |
| gearbox/internal/plugins/services/partials.templ | Adds HTMX partials for services overview/list/failed rendering. |
| gearbox/internal/plugins/os_updates/widgets.templ | Removes OS updates widget templ components. |
| gearbox/internal/plugins/os_updates/widgets.go | Removes OS updates widget definitions/registration. |
| gearbox/internal/plugins/os_updates/plugin.go | Removes widget registration and dashboard-related interfaces from OS updates plugin. |
| gearbox/internal/plugins/metrics/widgets.templ | Removes legacy metrics widget templ components. |
| gearbox/internal/plugins/metrics/plugin.go | Removes widget registration and dashboard-related interfaces from metrics plugin. |
| gearbox/internal/plugins/metrics/partials.templ | Adds HTMX partials for metrics “widget” fragments. |
| gearbox/internal/plugins/logs/plugin.go | Removes dashboard/widget interface methods from logs plugin. |
| gearbox/internal/plugins/haproxy/widgets_htmx.templ | Removes HAProxy widget HTMX placeholders. |
| gearbox/internal/plugins/haproxy/widgets.templ | Removes HAProxy widget templ components. |
| gearbox/internal/plugins/haproxy/widgets.go | Removes HAProxy widget definitions/registration. |
| gearbox/internal/plugins/haproxy/plugin.go | Removes widget registration and dashboard-related interfaces from HAProxy plugin. |
| gearbox/internal/plugins/haproxy/handlers.go | Stops redirecting to deleted dashboards; renders templ pages directly. |
| gearbox/internal/plugins/dashboard/widgets_htmx.templ | Removes dashboard plugin widget HTMX placeholders. |
| gearbox/internal/plugins/dashboard/widgets.templ | Removes dashboard plugin widget templ components. |
| gearbox/internal/plugins/dashboard/widgets.go | Removes dashboard plugin widget definitions/registration. |
| gearbox/internal/plugins/dashboard/plugin.go | Removes the dashboard core plugin. |
| gearbox/internal/plugins/dashboard/icons.go | Removes dashboard sidebar icon component. |
| gearbox/internal/plugins/dashboard/handlers.go | Removes dashboard plugin handlers. |
| gearbox/internal/plugins/dashboard/README.md | Removes dashboard plugin documentation. |
| gearbox/internal/plugins/certificates/widgets.templ | Removes certificates widget templ components. |
| gearbox/internal/plugins/certificates/widgets.go | Removes certificates widget definitions/registration. |
| gearbox/internal/plugins/certificates/plugin.go | Removes widget registration and dashboard-related interfaces from certificates plugin. |
| gearbox/internal/plugins/alerts/widgets.go | Removes alerts widget definitions/registration. |
| gearbox/internal/plugins/alerts/plugin.go | Removes widget registration and dashboard-related interfaces from alerts plugin. |
| gearbox/internal/framework/widget/widgets/status_card.templ | Removes widget framework UI building blocks. |
| gearbox/internal/framework/widget/widgets/refresh_control.templ | Removes widget framework UI building blocks. |
| gearbox/internal/framework/widget/widgets/placement_box.templ | Removes widget framework UI building blocks. |
| gearbox/internal/framework/widget/widgets/collapsible_container.templ | Removes widget framework UI building blocks. |
| gearbox/internal/framework/widget/widget.go | Removes widget core types/rendering. |
| gearbox/internal/framework/widget/top_bar.go | Removes widget top-bar control registry/types. |
| gearbox/internal/framework/widget/registry.go | Removes widget registry. |
| gearbox/internal/framework/widget/datasource.go | Removes widget data source registry. |
| gearbox/internal/framework/templates/pages/user_pages.templ | Removes Settings “Dashboards” link. |
| gearbox/internal/framework/templates/layouts/base.templ | Adds global chart CSS and chart defaults JS to base layout. |
| gearbox/internal/framework/plugin/interface.go | Removes DashboardPlugin and widget/datasource definitions from plugin interfaces. |
| gearbox/internal/framework/plugin/dependencies.go | Removes WidgetRegistry from plugin dependencies. |
| gearbox/internal/framework/handler/plugins.go | Removes plugin dashboard auto-deploy logic and YAML/dashboard imports. |
| gearbox/internal/framework/handler/pages.go | Updates migration note to point overview/status-grid to HAProxy plugin. |
| gearbox/internal/framework/handler/handler.go | Removes dashboard storage field + setter. |
| gearbox/internal/framework/handler/dashboard_manager.go | Removes dashboards manager/settings handlers. |
| gearbox/internal/framework/handler/api_services.go | Adds HTMX HTML partial rendering paths for services + helper fetcher. |
| gearbox/internal/framework/handler/api_metrics.go | Adds HTMX HTML partial endpoints for metrics “widget” fragments. |
| gearbox/internal/framework/handler/api_charts.go | Adds HTMX HTML partial endpoints for Chart.js-based charts. |
| gearbox/internal/framework/dashboard/validator.go | Removes dashboard YAML validation. |
| gearbox/internal/framework/dashboard/storage.go | Removes dashboard YAML storage. |
| gearbox/internal/framework/dashboard/slug.go | Removes dashboard slug helpers. |
| gearbox/internal/framework/dashboard/reset.go | Removes dashboard reset logic. |
| gearbox/internal/framework/dashboard/renderer.go | Removes dashboard renderer. |
| gearbox/internal/framework/dashboard/import.go | Removes dashboard YAML import logic. |
| gearbox/internal/framework/dashboard/export.go | Removes dashboard YAML export logic. |
| gearbox/internal/framework/dashboard/dashboard_grid.templ | Removes dashboard grid renderer templates. |
| gearbox/internal/framework/dashboard/dashboard.go | Removes dashboard config types/metadata. |
| gearbox/internal/framework/agent/client.go | Adds retrying dialer logic for agent client resilience. |
| gearbox/go.sum | Updates module checksums after tidy. |
| gearbox/go.mod | Removes direct yaml.v3 dependency. |
| gearbox/cmd/server/main.go | Removes dashboard/widget initialization; registers new metrics/charts/services partial API routes. |
| docs/reports/plugin-work-summary.md | Removes outdated report referencing widget/dashboard work. |
| docs/getting-started.md | Updates docs to remove dashboard/widget guidance. |
| docs/TASKS_ARCHIVE.md | Adds docs-local tasks archive. |
| TASKS_ARCHIVE.md | Removes repo-root tasks archive (moved under docs/). |
| README.md | Updates README to remove widget/dashboard architecture references. |
| DESIGN.md | Adds high-level design doc describing plugin-page architecture. |
| CLAUDE.md | Updates contributor AI guidance to remove widget/dashboard references. |
| .github/copilot-instructions.md | Updates Copilot project guidance to remove widget/dashboard references. |
| .claude/skills | Adds submodule pointer under .claude. |
Comments suppressed due to low confidence (6)
gearbox/internal/plugins/services/partials.templ:1
- FilterFailed currently returns all non-active services (including “inactive/stopped”), but
FailedServicesPartialrenders everything in this list as “Failed”. This will mislabel stopped services as failed. Filter by failure state instead (e.g.,svc.Status == "failed"), or rename the function + UI to reflect that it’s “non-active” rather than “failed”.
gearbox/static/js/charts/chart-sse.js:1 - isSSEConnected can return
null(wheneventSourceis null) instead of a boolean. Return a strict boolean (e.g.,return !!eventSource && eventSource.readyState === EventSource.OPEN;) to match the JSDoc contract and avoid downstream truthiness bugs.
gearbox/internal/plugins/haproxy/handlers.go:1 - On an unexpected
deps.Serverstype,getServersreturnsnil, and the callers treatlen(servers) == 0as “no servers configured” and redirect to/settings/boxes. That masks an internal wiring error as a normal “no servers” state. Prefer returning an error (or writing a 500 response in the caller) so misconfiguration is surfaced correctly.
gearbox/internal/framework/templates/layouts/base.templ:1 - These chart assets are now loaded on every page via the base layout. If only a subset of pages actually render Chart.js widgets, consider making these conditional (or lazy-loading) to reduce CSS/JS payload and improve first-render performance across the app.
gearbox/static/js/charts/chart-fullscreen.js:1 - Generating an inline
onclick="..."string encourages handler-string injection bugs and makes it harder to lint/test. Prefer returning a DOM node (or using a template without behavior) and attaching the click handler viaaddEventListenerfrom code.
gearbox/static/js/charts/chart-defaults.js:1 - Fullscreen toggle logic now exists in both this global script (
window.GearboxCharts.toggleFullscreen) and the new ES modulechart-fullscreen.js. Having two implementations increases the chance of behavioral drift. Consider consolidating to a single source of truth (either global-only or module-only) and having the other call into it.
- Remove dead APIServicesListHTMLHandler (already handled by HX-Request check in APIServicesHandler) - Add upper bounds to chart query params (hours capped at 168, limit at 5000) - Update DESIGN.md to reflect 7 dashboard plugins (Dashboard plugin removed) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
/dashboards/haproxy-overviewURLs — now renders templ components directlygo mod tidyto remove unusedyaml.v3dependencyTest plan
make templ-generate && make buildsucceeds🤖 Generated with Claude Code